<template>
	<view>
		<view class="auth">
			<view class="wanl-title">修改{{mobile}}{{type == 1 ? '登录' : '支付'}}密码</view>
			<form @submit="formSubmit">
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input confirm-type="done" placeholder="请填写您的新密码" password type="text" placeholder-class="placeholder"
						name="newpassword" @input="onKeyInput"></input>
					<input name="mobile" disabled :value="mobile" style="display: none;"></input>
				</view>
				<view class="auth-group radius-bock bg-gray wlian-grey-light">

					<input placeholder-class="placeholder" name="captcha" v-model="captcha" placeholder="请填写验证码"
						maxlength="6"></input>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
						@change="codeChange"></u-verification-code>
					<text @tap="getCode">{{tips}}</text>
				</view>
				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-green sl radius-bock" formType="submit" :disabled="!mobile || !captcha">修改密码</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import graceChecker from '@/common/graceChecker'; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				username: this.$store.state.user.username,
				mobile: '',
				captcha: '',
				submitDisabled: true,
				type: 1,
				event: '',

				tips: '',
				seconds: 10,
			};
		},
		onLoad(options) {
			this.mobile = options.mobile;
			this.event = options.event;
			this.type = options.type
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})

					uni.request({
						url: '/wanlshop/sms/send',
						method: 'POST',
						data: {
							event: this.event,
							mobile: this.mobile
						},
						success: res => {
							this.$wanlshop.msg('验证码发送成功');
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						},
					});


				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			async formSubmit(e) {
				//将下列代码加入到对应的检查位置
				//定义表单规则
				var rule = []
				if (this.type == 1) {
					rule = [{
							name: 'mobile',
							checkType: 'phoneno',
							errorMsg: '请输入正确手机号'
						},
						{
							name: "captcha",
							checkType: "zipcode",
							errorMsg: "验证码至少6位"
						},
						{
							name: "newpassword",
							checkType: "string",
							checkRule: "6,12",
							errorMsg: "密码应为6-12个字符"
						}
					];
				} else {
					rule = [{
							name: 'mobile',
							checkType: 'phoneno',
							errorMsg: '请输入正确手机号'
						},
						{
							name: "captcha",
							checkType: "zipcode",
							errorMsg: "验证码至少6位"
						},
						{
							name: "newpassword",
							checkType: "string",
							checkRule: "6,6",
							errorMsg: "密码应为6个字符"
						}
					];
				}
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					if (this.type == 1) {
						await uni.request({
							url: '/wanlshop/user/resetpwd',
							method: 'POST',
							data: {
								mobile: formData.mobile,
								captcha: formData.captcha,
								newpassword: formData.newpassword
							},
							success: res => {
								// 提示
								this.$wanlshop.msg('重置登录密码成功');
								// 返回
								setTimeout(function() {
									// uni.switchTab({
									// 	url: '/pages/user'
									// });
									uni.navigateBack({
										delta:1
									})
								}, 1000);
							}
						});
					} else {
						await uni.request({
							url: '/wanlshop/user/resetPasspwd',
							method: 'POST',
							data: {
								mobile: formData.mobile,
								captcha: formData.captcha,
								pay_pass: formData.newpassword
							},
							success: res => {
								// 提示
								this.$wanlshop.msg('重置支付密码成功');
								// 返回
								setTimeout(function() {
									// uni.switchTab({
									// 	url: '/pages/user'
									// });
									
									uni.navigateBack({
										delta:1
									})
								}, 1000);
							}
						});
					}
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			}
		}
	};
</script>

<style>
	@import url("auth.css");
</style>